<template>
    <Dialog :title="'摄像头'" :show="true" @close="cancel" :width="415" height="auto" :left="30" :top="200">
        <div class="dialog-content">
            <div class="content">
                <el-label>名称</el-label>
                <el-input v-model="name" placeholder="请输入摄像头名称"></el-input>
                <el-label>位置</el-label>
                <div>
                    <el-input v-model="position[0]" type="number" placeholder="请输入经度"></el-input>
                    <el-input v-model="position[1]" type="number" placeholder="请输入纬度"></el-input>
                    <el-input v-model="position[2]" type="number" placeholder="请输入高度"></el-input>
                </div>
                <el-label>分组</el-label>
                <div>
                    <el-input v-model="extras" placeholder="请输入分组"></el-input>
                </div>
            </div>
            <div class="footer">
                <el-button @click="cancel">取消</el-button>
                <el-button type="primary" @click="confirm">确定</el-button>
            </div>
        </div>
    </Dialog>

</template>
<script setup lang="ts">
import { ESImageLabel } from "esobjs-xe2-plugin/dist-node/esobjs-xe2-plugin-main";
import Dialog from "./common/Dialog.vue"
import { getMyProjectManager } from "@/getMyProjectManager";
import { ref, watch } from "vue";
// 对象管理器
const myProjectManager = getMyProjectManager()
const props = withDefaults(defineProps<{ id: string }>(), {});
const name = ref<string>("摄像头")
const position = ref<[number, number, number]>([0, 0, 0])
const extras = ref<string>('')
// 临时摄像头对象
const sceneObject = myProjectManager.createSceneObject(ESImageLabel) as ESImageLabel
if (sceneObject) {
    sceneObject.sizeByContent = false
    sceneObject.size = [40, 50]
    sceneObject.editing = true
    sceneObject.name = name.value
    sceneObject.extras = extras.value
}

sceneObject.dispose(sceneObject.positionChanged.don(() => {
    position.value = [...sceneObject.position]
}))


watch(() => name.value, () => {
    sceneObject.name = name.value
}, { deep: true })

watch(() => [position.value], () => {
    sceneObject.position = [...position.value]
}, { deep: true })

watch(() => [extras.value], () => {
    sceneObject.extras = extras.value
}, { deep: true })

// 取消
const cancel = () => {
    sceneObject.editing = false
    myProjectManager.destroySceneObject(sceneObject)
    myProjectManager.compontentManager.deleteCompontent({
        component: 'CameraProPerty',
        id: props.id
    })
}
// 确认
const confirm = () => {
    sceneObject.editing = false
    const json = JSON.parse(sceneObject.jsonStr)
    // 销毁临时三维对象
    myProjectManager.destroySceneObject(sceneObject)
    myProjectManager.cameraManager.createCamera({
        name: json.name,
        id: json.id,
        position: json.position,
        extras: json.extras
    })
    myProjectManager.compontentManager.deleteCompontent({
        component: 'CameraProPerty',
        id: props.id
    })
}



</script>
<style>
.el-dialog__wrapper {
    pointer-events: none;
}

.el-dialog {
    pointer-events: auto;
}

.dialog-content {
    padding: 10px;
}

.content {
    display: grid;
    grid-template-columns: 60px 1fr;
    align-items: center;
    grid-row-gap: 10px;
    font-size: 15px;
}

.content div {
    display: flex;
}

.footer {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
}
</style>